<template>
  <div class="page-box" v-loading="listLoading">
    <el-form ref="refname" :model="refname" label-width="80px">
      <div class="mains_content">
        <div class="mains_time">
          <div></div>
          <el-button icon="el-icon-circle-plus" @click="onSubmit()">发起赠票</el-button>
        </div>
        <div class="add_ticket">
          <p class="ticket_status">门票选择:</p>
          <el-row :gutter="24" class="country">
            <el-col class="ticket-box" :span="8" v-for="(item,index) in dataList" :key="index">
              <span class="one-txt-cut" :class="item.isActive ? 'detail-selected' : 'detail-btn'" @click="selctone(item)">{{ item.tTypeName }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="add_input">
          <div class="mains_title">
            <el-row :gutter="24" class="row-bg">
              <el-col v-for="(item, index) in fieldList" :key="index" :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label-width="130px" :label="item.attribute.titName">
                    <el-input v-if="item.componentName=='stringTem'||item.componentName=='numberTem'" :maxlength="46" :clearable="true" :placeholder="`请输入${item.attribute.ifCheck?'(必填)':'(选填)'}`" v-model.trim="item.attribute.filedValue"></el-input>
                    <el-select filterable style="width:100%" v-if="item.componentName=='moreSelectTem'" v-model="item.attribute.filedValue" :placeholder="`请选择${item.attribute.ifCheck?'(必填)':'(选填)'}`">
                      <el-option v-for="(it,ind) of item.attribute.selectList" :key="ind" :label="it.name" :value="it.name"> </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="orderDetail">
                  <el-input type="textarea" :rows="4" placeholder="请输入备注内容" v-model.trim="refname.orderDetail"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import elementUIFun from "@/components/js/elementUIFun.js";
import servicePub from "@/api/servicePub";
import { idcardReg } from "@/components/reg/idCard";
export default {
  data() {
    return {
      listLoading: false,
      dataList: [],
      refname: {}
    };
  },
  computed: {
    thisActivityId() {
      return this.$store.state.activityId.thisActivityId;
    },
    fieldList() {
      return this.$store.state.activityId.fieldList;
    }
  },
  watch: {
    thisActivityId(a, b) {
      this.initFun();
    }
  },
  created() {
    this.initFun();
  },
  methods: {
    initFun() {
      this.giveList();
    },
    //获取票类型数据
    async giveList() {
      this.listLoading = true;
      let pra = {
        activityId: this.$store.state.activityId.thisActivityId,
        isPay: "free"
      };
      const { data = [] } = await servicePub.queryTicketTypeListByEnable(pra);
      for (let i = 0; i < data.length; i++) {
        this.$set(data[i], "giveNum", 0);
        this.$set(data[i], "isActive", false);
        this.$set(data[i], "tName", data[i].tTypeName);
      }
      this.dataList = data;
      this.listLoading = false;
    },
    //点击选中票类型
    selctone(item) {
      item.isActive = !item.isActive;
      if (!item.isActive) {
        item.giveNum = 0;
      } else {
        item.giveNum = 1;
      }
    },
    // 验证表格里面的每一项
    async checkFromItem() {
      let formList = this.fieldList;
      let ifCheckAll = true; //是否检查完了全部(每一个必填项信息)
      for (let i = 0; i < formList.length; i++) {
        if (
          formList[i].attribute.ifCheck &&
          !formList[i].attribute.filedValue
        ) {
          ifCheckAll = false;
          this.$message({
            message: `${
              formList[i].attribute.placeholder
                ? formList[i].attribute.placeholder
                : "请填写"
            }${formList[i].attribute.titName}`,
            type: "warning"
          });
          break;
        } else if (
          //验证邮箱
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uEmail"
        ) {
          let regu = /@/;
          let re = new RegExp(regu);
          if (!re.test(formList[i].attribute.filedValue)) {
            ifCheckAll = false;
            this.$message({
              message: "请填写正确邮箱",
              type: "warning"
            });
            break;
          }
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uIdCard" &&
          !idcardReg(formList[i].attribute.filedValue)
        ) {
          this.$message({
            message: `请填写正确${formList[i].attribute.titName}`,
            type: "warning"
          });
          ifCheckAll = false;
          break;
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          !/^\d+$/.test(formList[i].attribute.filedValue)
        ) {
          ifCheckAll = false;
          this.$message({
            message: "请填写正确的手机号码",
            type: "warning"
          });
          break;
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          formList[i].attribute.areaCode == "86" &&
          formList[i].attribute.filedValue.length != 11
        ) {
          ifCheckAll = false;
          this.$message({
            message: "请填写正确的手机号码",
            type: "warning"
          });
          break;
        }
      }
      return new Promise((resolve, reject) => {
        resolve(ifCheckAll);
      });
    },
    //提交赠票数据
    async onSubmit() {
      let resData = await this.checkFromItem();
      if (!resData) {
        return;
      }
      if (!this.refname.orderDetail) {
        this.$message({
          message: "请输入备注内容",
          type: "warning"
        });
        return;
      }
      let result = [];
      this.dataList.forEach(element => {
        if (element.giveNum != 0 && element.isActive == true) {
          (element.vnote1 = this.refname.source), result.push(element);
        }
      });
      this.refname.ticketList = result;
      this.refname.ascription = 3;
      this.refname.activityId = this.$store.state.activityId.thisActivityId;
      if (!this.refname.ticketList.length) {
        this.$message({
          message: "请先进行门票选择",
          type: "warning"
        });
        return;
      }

      let subData = {
        ticketList: this.refname.ticketList,
        activityId: this.refname.activityId,
        sendTicketRemark: this.refname.orderDetail,
        isPay: "free"
      };
      const confirm = await elementUIFun.$confirm(`确定赠票?`);
      if (!confirm) {
        return;
      }
      for (let i = 0; i < this.fieldList.length; i++) {
        subData[this.fieldList[i].attribute.filedCode] = this.fieldList[
          i
        ].attribute.filedValue;
      }
      this.listLoading = true;
      const { success = false } = await servicePub.sendTicketByPersonal(
        subData
      );
      this.listLoading = false;
      if (success) {
        this.$message({
          message: "赠票成功",
          type: "success"
        });
        this.refname.orderDetail = "";
        // 清空字段value值
        let fieldList = this.$store.state.activityId.fieldList;
        for (let i = 0; i < fieldList.length; i++) {
          fieldList[i].attribute.filedValue = "";
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.mains_content {
  background-color: #fff;
  border-radius: 5px;
  .mains_time {
    padding: 30px 30px;
    display: flex;
    justify-content: space-between;
  }
  .add_ticket {
    padding: 50px 120px 0 120px;
    border-top: 1px solid #eee;
  }
  .ticket_status {
    font-size: 26px;
    text-align: left;
  }
}
.add_input {
  padding: 50px 120px;
  border-bottom: 1px solid #eee;
}
.country {
  margin: 40px 0 20px;
  .ticket-box {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
  }
  .detail-btn,
  .detail-selected {
    cursor: pointer;
    display: inline-block;
    width: 200px;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    margin-right: 30px;
    background-color: #f5f7fa;
  }
  .detail-selected {
    background-color: #00b2a9;
    color: #fff;
  }
}
</style>


